개발 기록 7

[mini-project] Yoga Responsive Website Re-design

📌 프로젝트 개요실존하는 요가 스튜디오의 웹사이트를 벤치마킹하여 Redesign을 하였습니다. 그리고 반응형으로도 제작하여 사용자가 다양한 방식으로 접근을 할 수 있도록 하였습니다.* 이 프로젝트는 상업적 용도가 아닙니다. 프로젝트 명: 요가원 반응형 웹사이트 리뉴얼개발 기간: 2024-06-25 ~ 2024-08-04목적: HTML5, CSS3을 사용하여 반응형 웹사이트를 제작하면서 경험을 쌓는 것과 동적인 부분을 JavaScript만을 사용하여 구현을 함으로써 언어에 대한 이해도와 경험을 쌓기 위함입니다.사용 기술: HTML5, CSS3, JavaScript, VS Code, Git & GitHub, GitHub Pages🧩 구현 기능기능명상세 설명원페이지 반응형하나의 페이지에 PC, 태블릿, 모..

개발 기록 2025.07.08

[mini-project] To-do List (React)

📌 프로젝트 개요리액트를 사용하여 To-do List를 만들고 GitHub Pages로 배포하는 개인 미니 프로젝트.데이터는 로컬 스토리지 사용.프로젝트 명: 리액트로 만든 To-do List개발 기간: 24.08.05 ~ 24.08.21목적: React를 이해하고 개인이 가볍게 사용할 목적으로 React를 사용하여 To-do List를 제작하였습니다.사용 기술: HTML5, CSS3, JavaScript, React, React Hooks, VS Code, Git & GitHub, GitHub Pages🧩 구현 기능기능명상세 설명할 일 추가내용을 입력 후 + 버튼을 클릭하면 할 일이 목록에 추가된다.할 일 삭제추가된 할 일 우측에 있는 - 버튼을 클릭하면 삭제된다.할 일 수정추가된 할 일을 클릭하면..

개발 기록 2025.07.07

[mini-project] Country Flag Guessing Game (JS)

📌 프로젝트 개요학원 수업 시간에 배운 class 객체를 활용하여 만든 나라별 국기 맞추기 게임입니다.객관식 형태이며 누구나 재밌게 게임을 즐길 수 있습니다.(현재 국기는 많이 등록되어 있지 않습니다.)프로젝트 명: 국기 맞추기 게임개발 기간: 24.06.29 ~ 24.07.01목적: class 객체를 활용하여 무언가를 만들어 보는 경험을 쌓고, 코드 활용 및 스스로 생각하는 힘을 기르기 위함.사용 기술: HTML5, CSS3, JavaScript, Git & GitHub, GitHub Pages, VS Code🧩 구현 기능기능명상세 설명랜덤 국기 출현Math 클래스를 사용하여 국기가 무작위로 출력객관식 4지선다형정답 1개를 포함한 4개의 객관식을 무작위로 출력정답 유무 결과알림창으로 오답, 정답 출..

개발 기록 2025.07.05

[toy-project] JWT 기반 인증/인가 구현 (Spring Boot)

📌 프로젝트 개요JWT를 활용해 로그인을 구현하고, Spring Security로 인가 기능을 구현. 비밀번호는 BCrypt로 암호화.프로젝트 명: JWT 기반 인증/인가 구현 (Spring Boot)개발 기간: 25.06.23 ~ 25.06.27목적:JWT를 활용한 로그인 및 인가 기능을 직접 구현하여 인증 방식의 원리를 이해하고 실습Spring Boot로 기능별 API 설계 연습사용 기술: Java 17, Spring Boot 3.5.4, JPA & H2, VS Code, Git & GitHub🧩 구현 기능기능명상세 설명회원가입비밀번호는 BCrypt로 암호화하여 저장로그인로그인 시 JWT 토큰이 발급, HttpOnly 쿠키에 저장로그아웃로그아웃 시 HttpOnly 쿠키의 JWT 토큰 삭제인가페이지..

개발 기록 2025.07.04

[toy-project] Library Book Manager (CLI, Java)

📌 프로젝트 개요16일차까지 배운 Java 기초 문법을 활용하여 만든 도서관 도서 관리 시스템 (CLI 기반)프로젝트 명: Library Book Manager (CLI)개발 기간: 25.07.02 ~ 25.07.03목적: Java 기초 문법 복습실무처럼 디렉토리 및 클래스 구조 설계 연습단순 기능 구현 이상의 설계 감각을 기르기 위한 실습사용 기술: Java 17, VS Code IDE, Git & GitHub🧩 구현 기능기능설명책 등록제목, 저자, 출판 연도 입력 후 리스트에 저장전체 목록 조회등록된 도서들을 연도순으로 정렬하여 출력책 검색제목 또는 저자 키워드로 부분 검색책 삭제제목을 기준으로 도서 삭제종료프로그램 종료예외 처리연도 음수 입력, 사용자 입력 오류에 대한 처리💜 GitHub 저장..

개발 기록 2025.07.03

[team-project] Hotel PMS

국비지원 무료 교육을 통해 풀스택 6개월 과정의 수업을 듣고 한 달 정도 팀 프로젝트를 진행했다.우리 팀의 주제는 호텔 PMS이며, 각각 담당한 비즈니스 로직을 구현하고 프런트엔드와 백엔드를 맡아서 개발하였다. (프런트엔드, 또는 백엔드만 개발한 사람도 있었다.) 그중 나는 팀장을 맡아서 회의 진행, 사용자/관리자 페이지 프런트 단 github repository 관리, branch merge, 팀 문서 정리, 발표 자료를 준비했고, 개발 관련해서는 결제 관리(사용자/관리자 페이지 각 프런트엔드·백엔드 부분), 게시판(사용자/관리자 페이지 각 프런트엔드 부분), 관리자 페이지 공통 스타일 템플릿을 개발하였다. 이 글을 작성하는 요지는 팀 프로젝트는 미완성으로 끝난 프로젝트이며, 개인 포트폴리오에 올리기에..

개발 기록 2025.04.29

JavaScript를 사용하여 목록을 추가하는 간단한 예제

※ 본인이 공부하면서 JavaScript문서를 보고 만든 예제입니다.※ 누구나 사용할 수 있습니다. (잘 봤다는 댓글이나 공감 해주시면 감사♥)※ 좋은 자료 서로서로 공유하며 실력 향상합시다!※ 모두다 JavaScript 열공! 🙌   목록을 추가하는 이벤트만 있는 예제입니다.(삭제하는 이벤트는 없음) 요약 설명JavaScript를 사용하여 태그에서 text를 입력 후 Enter키를 누르면 태그에 태그가 추가된다.추가된 태그에는 태그에서 입력한 text의 내용이 적혀있다. 최종 모습 CodepenSee the Pen add list by eziquexx (@eziquexx) on CodePen.  사용한 HTML 태그 사용한 JavaScript 이벤트keydown event 사용한 Methods.ad..

개발 기록 2024.08.24